<template>
    <div class="distribution-history">
        <h3 class="cll_h3">配送记录</h3>
        <hr />
        <el-form :model="form" label-width="120px" :inline="true" class="formBox">
            <el-form-item size="small">
                <el-select v-model="form.value" placeholder="男士">
                    <el-option label="男士餐" value="男士餐" />
                    <el-option label="女士餐" value="女士餐" />
                    <el-option label="工作餐" value="工作餐" />
                </el-select>
            </el-form-item>
            <el-form-item size="small" :model="form">
                <el-date-picker type="datetime" placeholder="开始时间" v-model="form.start" />
                <span class="middle">至</span>
                <el-date-picker type="datetime" placeholder="结束时间" v-model="form.end" />
            </el-form-item>
            <span class="timeBtn">
                <el-button link size="small" @click="handleFind">筛选</el-button>
            </span>
        </el-form>
        <hr />

        <el-table :data="distributionData" style="width: 100%" >
            <el-table-column type="selection" width="45" align="center" />
            <el-table-column property="goods" label="商品" width="120" align="center" />
            <el-table-column property="distributionTime" label="配送时间" show-overflow-tooltip align="center" />
            <el-table-column property="distributionAddress" label="配送地址" show-overflow-tooltip align="center" />
            <el-table-column property="state" label="状态" show-overflow-tooltip align="center" />
            <el-table-column property="remarks" label="备注" show-overflow-tooltip align="center" />
        </el-table>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" :default-page-size="pageSize"
                hide-on-single-page @current-change="pageChange" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { getdistributionDetail } from '../../api/user'
import dayJS from 'dayjs'
export default defineComponent({
    name: 'distributionHistory',
    data() {
        return {
            form: {
                value: '',
                start: '',
                end: '',
                page:1,
            },
            str: 'YYYY-MM-DD HH:mm:ss',
            user: [],
            distributionData: [{
                goods: '男士餐',
                distributionTime: '2017-06-05  12:30',
                distributionAddress: '武侯区肖家河大厦3楼',
                state: '已配送',
                remarks: '',
            }],
            total: 1,
            pageSize: 8,
        }
    },
    methods: {
        // 筛选
       async handleFind() {
          // @ts-ignore
          let date1 = dayJS(this.form.start).format(this.str)
            // @ts-ignore
            let date2 = dayJS(this.form.end).format(this.str)
            // @ts-ignore
            date1 = (dayJS(date1).valueOf())
            // console.log('date1 = ',(dayJS(date1).valueOf()))
            // @ts-ignore
            date2 = (dayJS(date2).valueOf())
        //    console.log(' date2 = ',(dayJS(date2).valueOf()))
            this.form.start = date1
            this.form.end = date2
            const data = this.form
            data.page = 1
            // @ts-ignore
            const res = await getdistributionDetail(data)
            console.log(res)
            // @ts-ignore
            this.distributionData = res.list 
            // @ts-ignore
            this.total = res.total       
        },
        reset() {
            this.form.start =''
            this.form.end = ''
            this.form.value = ''
        },
        // 分页切换
        pageChange(page: number) {
            this.distributionDetail(page)
        },
        // 请求配送记录数据
        async distributionDetail(page = 1) {
            const data = this.form
            data.page = page
            const res = await getdistributionDetail(data)
            console.log(res)
            //@ts-ignore
            const { list, total, pageSize } = res
            this.distributionData = list
            this.total = total
            this.pageSize = pageSize
        }
    },
    created() {
        this.distributionDetail()
    },
})
</script>

<style lang="less" scoped>
.pagination {
    margin: 30px 0 0 400px
}

.formBox {
    margin-top: 15px;
}

.middle {
    padding: 0 10px;
}

.timeBtn {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: rgb(131, 131, 131);
    margin-left: 20px;
    transform: translateY(-6px);

    .el-button.is-link {
        color: white;
        font-size: 14px;
    }

}
</style>
